<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <title>算法</title>
    <style>
        table,
        th,
        td {
            border: 1px solid #ddd;
        }

        table {
            border-collapse: collapse;
            width: 800px;
            margin: 10% auto;
        }

        th,
        td {
            padding: 10px;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>分数</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张</td>
                    <td>国商01</td>
                    <td>89</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李</td>
                    <td>国商01</td>
                    <td>89</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王</td>
                    <td>国商01</td>
                    <td>88</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>李</td>
                    <td>国商02</td>
                    <td>88</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>李</td>
                    <td>国商02</td>
                    <td>88</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>李</td>
                    <td>国商02</td>
                    <td>88</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        $(function () {
            merage();

            function merage() {
                let table = $(".table tbody");
                let lenTr = table.children("tr").size();
                let lenTd = table.children("tr").eq(0).children("td").size();
                let sum = 1;
                let rowIndex = -1;
                // 列循环
                for (let c = 0; c < lenTd; c++) {
                    console.log("c", c);
                    // 行循环
                    for (let r = 0; r < lenTr - 1; r++) {
                        td = table.children("tr").eq(r).children("td").eq(c);
                        tdNext = table
                            .children("tr").eq(r + 1).children("td").eq(c);
                        if (td.html() == tdNext.html()) {
                            if (rowIndex == -1) {
                                rowIndex = r;
                            }
                            tdNext.addClass("hide");
                            sum++;
                        } else {
                            rowIndex = -1;
                            sum = 1;
                        }
                        table
                            .children("tr").eq(rowIndex).children("td").eq(c).attr("rowspan", sum);
                    }
                    rowIndex = -1;
                    sum = 1;
                }

            }
        });
    </script>
</body>

</html>